<template>
  <div id="search-list">
    <div class="content">
      <van-tabs v-model="active" swipeable @click="loadMore">
        <van-tab name="song" title="歌曲" infinite-scroll-distance="10">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell
              :label="item.artists[0].name"
              :title="item.name"
              v-for="item in SongsList.result.songs"
              :key="item.id"
              @click="playSong(item.id,item.name,item.artists[0].name),getPicid(item.album.id)"
            >
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <template #right-icon>
                <van-icon name="play-circle-o" size="30" color="#eee " />
              </template>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab name="video" title="视频">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell
              :label="item.creator[0].userName"
              :title="item.title"
              v-for="item in VideoList.videos"
              :key="item.vid"
            >
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <template #right-icon>
                <img width="40%" height="100%" v-lazy="item.coverUrl" />
              </template>
            </van-cell>
          </van-list>
        </van-tab>
        <van-tab name="singer" title="歌手">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell :title="item.name" v-for="item in SingerList.artists" :key="item.id">
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <template #right-icon>
                <van-image width="100" height="100" :src="item.picUrl" />
              </template>
            </van-cell>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <!-- <ul>
      <li v-for="item in list" :key="item.id">{{ item }}</li>
    </ul>-->
  </div>
</template>

<script>
import { Notify } from "vant";
import { InfiniteScroll } from "mint-ui";
export default {
  props: [
    "SongsList",
    "VideoList",
    "SingerList",
    "cookie",
    "keyword",
    "SearchSongsHasmore",
    "SearchVideosHasmore",
    "SearchSingerHasmore",
    "reset"
  ],
  data: function() {
    return {
      active: "",
      Songsoffset: 0,
      Videosoffset: 0,
      Singeroffset: 0,
      // 用于加载更多
      loading: false,
      finished: false
    };
  },
  methods: {
    onLoad() {
      //加载更多歌曲
      if (this.active == "song") {
        this.finished = false;
        // let last = this.SongsList.result.songs[
        //   this.SongsList.result.songs.length - 1
        // ];
        //如果hasMore为true时，再次请求一条数据
        if (this.SearchSongsHasmore == true) {
          this.Songsoffset = this.Songsoffset + 30;
          this.$http
            .get(
              "search?type=1&keywords=" +
                this.keyword +
                "&offset=" +
                this.Songsoffset
            )
            .then(result => {
              this.SearchSongsHasmore = result.data.result.hasMore;
              console.log(this.SearchSongsHasmore);
              // Notify({ type: "success", message: "搜索成功", duration: 500 });
              //将新搜索的歌曲添加到SongsList中
              this.SongsList.result.songs = this.SongsList.result.songs.concat(
                result.data.result.songs
              );
              this.loading = false;
            });
        } else {
          this.finished = true;
          this.loading = false;

          Notify({ type: "primary", message: "没有更多了", duration: 500 });
        }
      }
      //   加载更多视频
      else if (this.active == "video") {
        // let last = this.VideoList.result.videos[
        //   this.VideoList.result.videos.length - 1
        // ];
        //如果hasMore为true时，再次请求一条数据
        if (this.SearchVideosHasmore == true) {
          this.Videosoffset = this.Videosoffset + 8;
          this.$http
            .get(
              "search?limit=8&type=1014&keywords=" +
                this.keyword +
                "&offset=" +
                this.Videosoffset
            )
            .then(result => {
              //   console.log(result);

              this.SearchVideosHasmore = result.data.result.hasMore;
              //   console.log(this.SearchVideosHasmore);
              // Notify({ type: "success", message: "搜索成功", duration: 500 });
              //将新搜索的歌曲添加到SongsList中
              this.VideoList.videos = this.VideoList.videos.concat(
                result.data.result.videos
              );
              this.loading = false;
            });
        } else {
          this.finished = true;
          this.loading = false;

          Notify({ type: "primary", message: "没有更多了", duration: 500 });
        }
      }
      //   加载更多歌手
      else if (this.active == "singer") {
        this.finished = false;
        // let last = this.SingerList.artists[this.SingerList.artists.length - 1];
        //如果hasMore为true时，再次请求一条数据
        if (this.SearchSingerHasmore == true) {
          this.Singeroffset = this.Singeroffset + 8;
          this.$http
            .get(
              "search?limit=8&type=100&keywords=" +
                this.keyword +
                "&offset=" +
                this.Singeroffset
            )
            .then(result => {
              this.SearchSingerHasmore = result.data.result.hasMore;
              //   console.log(this.SearchVideosHasmore);
              //   console.log(result);
              // Notify({ type: "success", message: "搜索成功", duration: 500 });
              //将新搜索的歌曲添加到SongsList中
              this.SingerList.artists = this.SingerList.artists.concat(
                result.data.result.artists
              );
              this.loading = false;
            });
          this.loading = false;
        } else {
          this.finished = true;
          this.loading = false;

          Notify({ type: "primary", message: "没有更多了", duration: 500 });
        }
      }
    },
    loadMore() {
      this.finished = false;
    },
    //播放歌曲事件,获取歌曲详细信息
    playSong(id, SongName, SingerName) {
      this.$emit("clickSong", id, SongName, SingerName);
    },
    getPicid(id) {
      this.$emit("getSongPic", id);
    }
  },
  watch: {
    //   当reset改变时，清空offset的值
    "$props.reset": function() {
      this.Songsoffset = 0;
      this.Singeroffset = 0;
      this.Videosoffset = 0;
    }
  }
};
</script>

<style lang="scss">
#search-list {
}
</style>